<template>
  <div id="zonghe">
    <div class="step-one">
      <div class="all-title">综合能力评定</div>
      <div class="step-one-content">
        <div class="box-left all-box">
          <chart1 />
        </div>
        <div class="box-right all-box">
          <chart2 />
        </div>
      </div>
    </div>
    <div class="step-two">
      <div class="step-two-content">
        <div class="box-left all-box">
          <chart3 />
        </div>
        <div class="box-right all-box">
          <chart4 />
        </div>
      </div>
    </div>
    <div class="step-three">
      <el-table
        class="my-table"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        >
          <template #default="{ row }">
            <el-icon class="green">
              <CircleCheckFilled />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="Address"
        >
          <template #default="{ row }">
            <el-icon class="red">
              <WarningFilled />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="step-four">
      <div class="title">
        <el-icon>
          <Document />
        </el-icon>
        毕业目标
      </div>
      <el-table
        class="my-table"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        />
        <el-table-column
          prop="address"
          label="Address"
        >
          <template #default="{ row }">
            <div class="blue">目标1</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="step-five">
      <div class="title">
        <el-icon>
          <Tickets />
        </el-icon>
        毕业要求
      </div>
      <div class="five-btns">
        <div class="five-btn active">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
        <div class="five-btn">毕业要求1</div>
      </div>
      <div class="five-content">
        1-1 掌握数学与自然科学的基本概念、基本理论和基本技能，具备逻辑推理和逻辑表达能力；
        1-2 掌握计算机工程和计算机科学与技术专业知识，包括计算机硬件、软件及系统等方面内容，具备理解计算机领域复杂工程问题的能力，能够判别计算机系统的复杂性；
        1-3 能够将数学、自然科学、工程基础和计算机科学与技术专业知识用于建立针对计算机领域复杂工程问题的基本模型，具备模型表达的能力，并能够根据具体问题的工程背景权衡和控制模型的复杂性；
        1-4 能够针对复杂工程问题模型，运用所学的数学、自然科学、工程基础和计算机科学与技术专业知识对模型的复杂性、局限性、技术指标进行分析和评价；
        1-5 能够针对复杂工程问题模型，运用所学的数学、自然科学、工程基础和计算机科学与技术专业知识进行问题分析。
      </div>
    </div>
  </div>
</template>
  
  <script>
import chart1 from "@/components/ZongHeChart1.vue";
import chart2 from "@/components/ZongHeChart2.vue";
import chart3 from "@/components/ZongHeChart3.vue";
import chart4 from "@/components/ZongHeChart4.vue";
export default {
  name: "Dashboard",
  components: {
    chart1,
    chart2,
    chart3,
    chart4,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
#zonghe {
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .step-one {
    margin-bottom: 20px;
    .step-one-content {
      display: flex;
      gap: 20px;
      .box-left {
        flex: 0 0 30%;
      }
      .box-right {
        flex: 0 0 calc(70% - 20px);
      }
    }
  }
  .step-two {
    margin-bottom: 20px;
    .step-two-content {
      display: flex;
      gap: 20px;
      .box-left {
        flex: 0 0 30%;
      }
      .box-right {
        flex: 0 0 calc(70% - 20px);
      }
    }
  }
  .step-three {
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 40px 60px;
    margin-bottom: 20px;
    .my-table {
      :deep(table) {
        th,
        td {
          padding: 2px;
          text-align: center;
          border: 0;
        }
        th {
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          .cell {
            height: 71px;
            line-height: 71px;
            background: #a6b4ec;
            margin-bottom: 4px;
          }
        }
        td {
          .cell {
            height: 44px;
            line-height: 44px;
            background: #f6f9ff;
            .green {
              font-size: 20px;
              color: #48c978;
            }
            .red {
              font-size: 20px;
              color: #ff6666;
            }
          }
        }
      }
    }
  }
  .step-four {
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 40px 60px;
    margin-bottom: 20px;
    .title {
      font-weight: bold;
      font-size: 20px;
      color: #1d2939;
      margin-bottom: 26px;
      .el-icon {
        color: #5a72cd;
        font-size: 20px;
      }
    }

    .my-table {
      :deep(table) {
        th,
        td {
          padding: 2px;
          text-align: center;
          border: 0;
        }
        th {
          display: none;
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          .cell {
            height: 71px;
            line-height: 71px;
            background: #a6b4ec;
            margin-bottom: 4px;
          }
        }
        td {
          .cell {
            height: 44px;
            line-height: 44px;
            background: #eff4ff;
            .blue {
              font-weight: bold;
              font-size: 16px;
              color: #5a72cd;
            }
          }
        }
      }
    }
  }
  .step-five {
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 40px 60px;
    margin-bottom: 20px;
    .title {
      font-weight: bold;
      font-size: 20px;
      color: #1d2939;
      margin-bottom: 26px;
      .el-icon {
        color: #5a72cd;
        font-size: 20px;
      }
    }
    .five-btns {
      display: flex;
      gap: 10px;
      margin-bottom: 13px;
      .five-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 86px;
        height: 33px;
        border-radius: 4px;
        border: 1px solid #bec2ce;
        font-size: 14px;
        color: #686e7f;
        cursor: pointer;
        &.active,
        &:hover {
          color: #ffffff;
          background: #457aff;
          border: 1px solid #457aff;
        }
      }
    }
    .five-content {
      font-size: 16px;
      background: #f6f9ff;
      border-radius: 4px;
      border: 1px solid #f6f9ff;
      font-size: 16px;
      color: #1d2939;
      line-height: 31px;
      padding: 20px 25px;
    }
  }
  @media (max-width: 1230px) {
    .step-one {
      margin-bottom: 20px;
      .step-one-content {
        flex-wrap: wrap;
        .box-left {
          flex: 0 0 100%;
        }
        .box-right {
          flex: 0 0 100%;
        }
      }
    }
    .step-two {
      .step-two-content {
        flex-wrap: wrap;
        .box-left {
          flex: 0 0 100%;
        }
        .box-right {
          flex: 0 0 100%;
        }
      }
    }
  }
}
</style>